<template>
    <div>
        <Modal v-model="modal" class="modal-center" title="导入实体" width=400>
            <div v-if="modalShow" class="form-input">
                <Row class="form-field">
                    <Col class="field-label" span="4">
                    <label>数据源</label>
                    </Col>
                    <Col class="field-input" span="20">
                    <Selector ref="datasource" v-model="datasourceId" :path="path.datasource"></Selector>
                    </Col>
                </Row>
                <Row class="form-field">
                    <Col class="field-label" span="4">
                    <label>实体</label>
                    </Col>
                    <Col class="field-input" span="20">
                    <Selector ref="entity" :disabled="!datasourceId" option-code="TABLE_NAME" option-key="TABLE_NAME" v-model="entityId" :path="entityPath"></Selector>
                    </Col>
                </Row>
            </div>
            <div slot="footer" class="button-panel-button">
                <i-button @click="close">取消</i-button>
                <i-button :disabled="!entityId" @click="doActionSubmit" type="primary">确认</i-button>
            </div>
        </Modal>
    </div>
</template> 

<script>
import ModalBase from '../modalBase'
import Selector from '@/components/selector'
import $ from '@/common'
export default {
    extends: ModalBase,
    props: {
    },
    data() {
        return {
            path: {
                datasource: '/service/dw/pf/rdbs',
                entity: '/service/{app}/pf/rdb/entities/{code}',
                //fields: 'service/{app}/entity/struct/{code}',
                fields: '/service/{app}/pf/rdb/entity/struct/{dsCode}/{entityCode}',
                submit: 'service/{app}/entity/imp'
            },
            datasourceId: null,
            dsCode: null,
            fieldsData: {
                table_cat: null,
                fields: []
            },
            entityId: null
        }
    },
    computed: {
        entityPath() {
            if (this.datasourceId) {
                this.dsCode = this.$refs.datasource.selectedData.code
                return $.composePath(this.path.entity, this.$refs.datasource.selectedData)
            } else {
                return null
            }
        }
    },
    methods: {
        load() {
        },
        submitData() {
            return [this.fieldsData]
        },
        doActionSubmit() {
            this.fieldsData = {
                ...this.$refs.entity.selectedData
            }
            $.link(this.path.fields, null, {
                param: {
                    dsCode: this.dsCode,
                    entityCode: this.entityId
                }
            }).then((res) => {
                this.fieldsData.fields = res.data
                this.actionSubmit()
            })
        }


    },
    components: {
        Selector
    }
}
</script>

<style lang="less">
.form-input {
    .form-field {
        padding: 8px;
    }
}
</style>
